<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
      :router="true"
  >
    <div><h1>欢迎来到咖啡店后台管理系统！</h1></div>
    <div class="flex-grow" />
    <el-sub-menu>
      <template #title>
        <div class="circle">
          <el-avatar :size="50" :src="imgUrl"></el-avatar>
        </div>
      </template>
      <el-menu-item @click="leave">
        <el-icon><SwitchButton /></el-icon>
        退出系统
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";


const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const imgUrl = 'src/assets/images/头像.jpg';
const router = useRouter();

const leave = () => {
  ElMessageBox.confirm(
      '您确定要离开嘛？',
      '危险操作',
      {confirmButtonText:'确定',cancelButtonText:'取消',type:'warning',}
  ).then(() => {
    localStorage.removeItem('loginData');
    router.replace({ name: 'Login' });
  })
}
</script>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
h1 {
  margin-top: 14px;
  color: black;
  margin-left: 20px;
}
</style>